<template>
  <a-modal width="80%" v-drag centered :destroyOnClose="true" :maskClosable="false" :visible="visible"
    :bodyStyle="{ padding: '1px' }" title="过程列表" @cancel="cancel">
    <vxe-table show-header-overflow show-overflow size="small" :height="height" :data="data">
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column field="type" align="center" title="当前节点" width="100px">
        <template v-slot="{ row }">
          <a-tag v-if="row.activityType == 2" color="#108ee9"> 开始 </a-tag>
          <a-tag v-if="row.activityType == 4" color="#87d068"> 审批 </a-tag>
          <a-tag v-if="row.activityType == 6" color="red"> 子流程 </a-tag>
          <a-tag v-if="row.activityType == 12" color="red"> 知会 </a-tag>
          <a-tag v-if="row.activityType == 14" color="red"> 阅示 </a-tag>
          <a-tag v-if="row.activityType == 16" color="red"> 加签 </a-tag>
          <a-tag v-if="row.activityType == 100" color="red"> 结束 </a-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column field="title" title="步骤名称" width="200px"></vxe-table-column>
      <vxe-table-column field="sendUserName" title="发送人" width="100"></vxe-table-column>
      <vxe-table-column field="receiveUserName" title="接收人" width="100"></vxe-table-column>
      <vxe-table-column field="receiveTime" title="接收时间" width="150"></vxe-table-column>
      <vxe-table-column field="doUserName" title="处理人" width="100"></vxe-table-column>
      <vxe-table-column field="completedTime" title="处理时间" width="150"></vxe-table-column>
      <vxe-table-column field="comment" title="审批意见"></vxe-table-column>

      <vxe-table-column field="approveUserName" title="审核人" width="100"></vxe-table-column>
      <vxe-table-column field="approveTime" title="审核时间" width="150"></vxe-table-column>
      <vxe-table-column field="approveComment" title="审核意见"></vxe-table-column>

      <vxe-table-column field="status" title="状态" width="100px" align="center">
        <template v-slot="{ row }">
          <a-tag v-if="row.status == 4" color="#108ee9"> 处理中 </a-tag>
          <a-tag v-if="row.status == 6" color="#2db7f5"> 完成 </a-tag>
          <a-tag v-if="row.status == 8" color="#c21401"> 暂停 </a-tag>
          <a-tag v-if="row.status == 12" color="#90cf5b"> 退回 </a-tag>
          <a-tag v-if="row.status == 14" color="#00af57"> 取消 </a-tag>
          <a-tag v-if="row.status == 16" color="#ff1e02"> 拒绝 </a-tag>
          <a-tag v-if="row.status == 18" color="#0071be"> 知会已阅 </a-tag>
          <a-tag v-if="row.status == 20" color="#00215f"> 已阅 </a-tag>
          <a-tag v-if="row.status == 22" color="#72349d"> 召回 </a-tag>
          <a-tag v-if="row.status == 24" color="#e2534d"> 删除 </a-tag>
        </template></vxe-table-column>
    </vxe-table>
  </a-modal>
</template>
 
  
<script>
import { workflowInstanceProcess } from "@/services/workflow/send/index";
export default {
  components: {},
  name: "dolist",
  data() {
    return {
      height: "500px",
      loading: false,
      data: [],
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    processInstanceId: {
      type: String,
    },
  },
  mounted() {
    this.initInstanceProcess();
  },
  methods: {
    /**
     *
     */
    initInstanceProcess() {
      let that = this;
      this.loading = true;
      workflowInstanceProcess({ id: this.processInstanceId }).then((result) => {
        that.data = result.data;
        that.loading = false;
      });
    },
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    save() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
        } else {
          return false;
        }
      });
    },
  },
};
</script>
  
<style lang="less" scoped></style>
  